<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>		
		<script src="../js/jquery-1.11.3.js"></script>
		<script src="../js/jquery.cookie.js"></script>
		<script type="text/javascript" src="../js/require.js" defer async="true" data-main = "../js/main"></script>
		<link rel="stylesheet" href="../css/zhuce.css"/>
	</head>
	<body>
		<!--header-->
		<div id="header"></div>
		<script>
			$("#header").load("http://127.0.0.1/XiaoZhuangWangXiangMu/html/public.html #header");
		</script>
		<div class="title_z">
			<div class="title_w">
				<div class="title_y">
					<div class="title_v">
						<span>全部商品分类</span>
					</div>
					<div class="title_u">
						<ul class="title_q">
							<li>
								<img src="../img/aa.jpg">
								<dl>
									<dt><span>面部护肤</span></dt>
									<dt><span>防晒隔离</span><span>面膜</span></dt>
									<dt><span>眼部护理</span><span>护肤套装</span></dt>
								</dl>
							</li>
							<li>
								<img src="../img/bb.jpg">
								<dl>
									<dt><span>面部护肤</span></dt>
									<dt><span>防晒隔离</span><span>面膜</span></dt>
									<dt><span>眼部护理</span><span>护肤套装</span></dt>
								</dl>
							</li>
							<li>
								<img src="../img/cc.jpg">
								<dl>
									<dt><span>面部护肤</span></dt>
									<dt><span>防晒隔离</span><span>面膜</span></dt>
									<dt><span>眼部护理</span><span>护肤套装</span></dt>
								</dl>
							</li>
							<li>
								<img src="../img/dd.jpg">
								<dl>
									<dt><span>面部护肤</span></dt>
									<dt><span>防晒隔离</span><span>面膜</span></dt>
									<dt><span>眼部护理</span><span>护肤套装</span></dt>
								</dl>
							</li>
							<li>
								<img src="../img/ee.jpg">
								<dl>
									<dt><span>面部护肤</span></dt>
									<dt><span>防晒隔离</span><span>面膜</span></dt>
									<dt><span>眼部护理</span><span>护肤套装</span></dt>
								</dl>
							</li>
							<li>
								<img src="../img/ff.jpg">
								<dl>
									<dt><span>面部护肤</span></dt>
									<dt><span>防晒隔离</span><span>面膜</span></dt>
									<dt><span>眼部护理</span><span>护肤套装</span></dt>
								</dl>
							</li>
						</ul>
					</div>
				</div>
				<div class="title_x">
					<a href="">首页</a>
					<a href="">SKIN79专区</a>
					<a href="">积分购</a>
					<a href="">美堂课</a>
					<a href="">手机校妆</a>
					<a href="">购物车</a>
				</div>
			</div>
		</div>
		<!--middle-->
		<div class="middle_a">
			<div class="middle_b">
				<div class="middle_c">
					<div class="middle_e"></div>
				</div>
				<div class="middle_d">
					<div class="middle_f">
						<div class="middle_g">
							<a class="middle_k">会员注册</a>
							<span class="middle_l">已有账号？<i style="color:#f70082" id="goLogin">请登录</i></span>
						</div>
						<div class="middle_h">
							<p>手机号：<input type="text" id="username" class="middle_m" placeholder="请输入手机号" autofocus></p><span id="s"></span>
							<p>密码：<input type="text" id="password" class="middle_n" placeholder="请输入密码" autofocus></P>
							<p>确认密码：<input type="text" id="conPwd" class="middle_o" placeholder="请确认密码" autofocus></p>
							<p>验证码：<input type="text" id="yanzheng" class="middle_p" placeholder="请输入验证码" autofocus</p>
						</div>
						<div class="middle_i">
							<div class="middle_t"><a href="" style="color:white"><input style="background:#f70082" type="button" id="register" value="同意协议并注册"></a></div>
						</div>
						<div class="middle_j">
							<div class="middle_s">
								<input type="checkbox" class="middle_r" name="">
								<a class="middle_y">我已阅读并同意<span style="color:#354cd5">会员注册协议</span>和<span style="color:#354cd5">隐私保护政策</span></a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="footer"></div>
		<script>
			$("#footer").load("http://127.0.0.1/XiaoZhuangWangXiangMu/html/public.html #footer");
		</script>
	</body>
</html>
<!--<script>
	$(function(){
	//给注册按钮加事件
	$("#register").click(function(){
		//获取用户名和密码
		var usn = $("#username").val();
		var pwd = $("#password").val();
		var con = $("#conPwd").val(); //确认密码
		
		//用户不能为空
		if(!usn){
			alert("用户名不能为空！");
			return;
		}
		
		//检测密码是否相同
		//密码不能为空，密码规则
		if(pwd !== con){
			alert("两次输入的密码不相同，请重试!");
			return;
		}
		
		//检测一下用户是否已经存在
		//假设："test1,123:test2,abc:test3,888"
		/*转为对象
		 * {
		 * 	test1:123,
		 *  test2:abc,
		 *  test3:888
		 * }
		 */
		
		//获取cookie中的用户信息
		var users = $.cookie("registerUsers") ? $.cookie("registerUsers") : "";
		
		//将字符串转为对象
		users = convertStrToObj(users);
		if(usn in users){ //判断usn属性是否在users对象中。
			alert("用户名已经被注册");
			return;
		}else{
			//注册成功，设置用户信息的cookie
			//test1 123  test2 abc  test3 888
			//"test1,123:test2,abc:test3,888"设置cookie的value值
			//registerUsers 设置cookie的name(key)值
			//将用户添加到已注册用户列表对象中
			users[usn] = pwd;
			//假设users[李涛] = 123
			
			
			//将用户信息对象转化回字符串，以便于设置cookie
			userStr = convertObjToStr(users);
			//设置用户信息cookie
			$.cookie("registerUsers",userStr,{expires:7,path:"/"});
			console.log(decodeURIComponent(document.cookie))
			alert("注册成功！");
		}
	});
	
	//给增登录按钮添加点击事件
	$("#goLogin").click(function(){
		//转到登录页面
		location.href = "login.html";
	});
})
//将字符串转为对象
function convertStrToObj(str){
	if(!str){
		return {};
	}
	//假设不为空："test1,123:test2,abc:test3,888:李涛,123"
	var users = str.split(":"); //将字符串转为数组 ["test1,123","test2,abc","test3,888"]
	var obj = {};
	/*
	 * var obj = new Object();
	 * obj["name"] = "zhangsan";
	 * 
	 */
	//遍历数组
	for(var i = 0; i < users.length; i ++){
		//将字符串转为数组
		var userData = users[i].split(",");
		//["test1",123] ["test2","abc"] ["test3",888]
		obj[userData[0]] = userData[1];
		/*转为对象如下：
		 * obj = {
		 * 	test1 : 123,
		 *  test2 : abc,
		 *  test3 : 888
		 * }
		 */
	}
	return obj;
}

//将对象转为字符串
function convertObjToStr(obj){
	////假设不为空："test1,123:test2,abc:test3,888:李涛,123"
	var str = "";
	for(var usn in obj){
		var pwd = obj[usn];
		if(str){
			//看是否是第一组用户名和密码，如果不是，先在前面添加一个：
			str += ":";
		}
		str += usn + ',' + pwd;
	}
	return str;
}

</script>-->
